import IconDouyin from '@/components/icon/IconDouyin';
import IconToutiao from '@/components/icon/IconToutiao';
import IconWeChatOfficialAccount from '@/components/icon/IconWeChatOfficialAccount';
import IconWeibo from '@/components/icon/IconWeibo';
import { savePriority } from '@/services/api/api-assess-priority';
import { selectRecord } from '@/services/api/api-assess-record';
import { LaptopOutlined, ShakeOutlined } from '@ant-design/icons';
import {
  ActionType,
  DrawerForm,
  ProForm,
  ProFormTextArea,
  ProList,
} from '@ant-design/pro-components';
import { useAccess } from 'umi';
import {
  Button,
  Descriptions,
  Divider,
  message,
  Space,
  Spin,
  Tag,
  Typography,
  Upload,
} from 'antd';
import React, { useRef, useState } from 'react';
import AddPriorityProve from './AddPriorityProve';
const { Paragraph } = Typography;
interface AddPriorityProps {
  id: string;
  areaId: string;
  areaName: string;
  releaseTimes: Array<string>; //季度发布时间范围
  onRefurbish: () => void;
}

const AddPriority: React.FC<AddPriorityProps> = ({
  id,
  areaId,
  areaName,
  releaseTimes,
  onRefurbish,
}) => {
  const access = useAccess();
  const actionRef = useRef<ActionType>();

  const [details, setDetailsState] = useState<AssessRecordData.RecordSelect>();

  const getDetail = async () => {
    const res = await selectRecord({ id });
    setDetailsState(res.data);
  };

  const [proves, setProveState] = useState<PriorityBo.ProveData[]>([]);

  const viewProveList = (dataSource: PriorityBo.ProveData[]) => {
    return (
      <ProList<PriorityBo.ProveData>
        toolBarRender={false}
        rowKey="id"
        showActions="hover"
        grid={{ gutter: 16, column: 1 }}
        headerTitle={false}
        dataSource={dataSource}
        itemCardProps={{
          bodyStyle: {
            paddingTop: 0,
            paddingLeft: 12,
            paddingRight: 12,
            paddingBottom: 12,
          },
        }}
        metas={{
          title: {
            render: (dom: React.ReactNode, entity: PriorityBo.ProveData, index: number, action) => (
              <Space align={'center'}>
                {entity.icon}
                {entity.title}
              </Space>
            ),
          },

          content: {
            render: (dom: React.ReactNode, entity: PriorityBo.ProveData, index: number, action) => {
              return (
                <div>
                  {entity.remarks && (
                    <Typography.Paragraph style={{}}>
                      <blockquote>{entity.remarks}</blockquote>
                    </Typography.Paragraph>
                  )}
                  <Upload
                    listType="picture-card"
                    fileList={entity?.attachments?.map((item) => item.file)}
                    showUploadList={{
                      showRemoveIcon: false,
                    }}
                  />
                </div>
              );
            },
          },
          actions: {
            cardActionProps: 'extra',
            render: (dom: React.ReactNode, entity: PriorityBo.ProveData, index: number, action) => [
              <a
                key="delete"
                onClick={() => {
                  setProveState(proves.filter((item) => item.id != entity.id));
                }}
              >
                删除
              </a>,
            ],
          },
        }}
      />
    );
  };

  return (
    <DrawerForm
      title={
        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
          <div>设置重点报道</div>
        </div>
      }
      resize={{
        onResize() {
          console.log('resize!');
        },
        maxWidth: window.innerWidth * 0.8,
        minWidth: 400,
      }}
      trigger={<a onClick={() => { }}>设置</a>}
      autoFocusFirstInput
      drawerProps={{
        destroyOnClose: true,
        width: 900,
      }}
      onOpenChange={(visible) => {
        if (visible) {
          getDetail();
        } else {
          onRefurbish();
          setProveState([]);
        }
      }}
      onFinish={async (values) => {
        if (proves == undefined || proves.length == 0) {
          message.warning('请添加证明材料');
          return;
        }

        const response = await savePriority({
          recordId: id,
          areaId: areaId,
          proves: proves.map((item) => {
            return {
              channelId: item.channelId,
              remarks: item.remarks,
              attachments: item.attachments.map((e) => e.id),
            };
          }),
          ...values,
        });

        if (response.code === 0) {
          message.success('提交成功');
          onRefurbish();
          return false;
        } else {
          return false;
        }
      }}
    >
      <Spin
        style={{
          textAlign: 'center',
        }}
        spinning={details === undefined}
      >
        {details !== undefined && (
          <>
            <Descriptions>
              <Descriptions.Item label="来源">
                <Space wrap>
                  {details?.proofSourceCascaders.map((item) => (
                    <Tag>{item.name}</Tag>
                  ))}
                </Space>
              </Descriptions.Item>
            </Descriptions>
            <Typography
              style={{
                marginBottom: 25,
              }}
            >
              {details?.proofSourceDescribes !== null && (
                <Typography.Paragraph>
                  <blockquote>{details?.proofSourceDescribes}</blockquote>
                </Typography.Paragraph>
              )}
            </Typography>
            <Divider />
          </>
        )}
        <ProForm.Group>
          <ProFormTextArea
            width="xl"
            name="remarks"
            label="备注"
            fieldProps={{
              allowClear: true,
              rows: 3,
              maxLength: 200,
            }}
          />
        </ProForm.Group>
        <Typography.Paragraph>
          <blockquote>
            在微博、微信公众号、抖音、今日头条单报道单平台转发量超1万、阅读量超5万得0.8分。
          </blockquote>
          <blockquote>在自有平台转发量超1万、阅读量超5万得0.2分。</blockquote>
          <blockquote>此项累计得分上限为30分。</blockquote>
        </Typography.Paragraph>
        <Divider
          orientation="left"
          plain
          style={{
            marginTop: '30px',
          }}
        >
          新媒体平台
        </Divider>
        <div style={{ display: 'flex', justifyContent: 'flex-end', textAlign: 'center', alignItems: 'center' }}>
          <Space align="start">
            <AddPriorityProve
              title="微信公众号"
              icon={<IconWeChatOfficialAccount width={18} height={18} />}
              illustrate={
                '在微博、微信公众号、抖音、今日头条单报道单平台转发量超1万、阅读量超5万得0.8分。'
              }
              channelId={'8117112412962885'}
              areaId={areaId}
              areaName={areaName}
              releaseTimes={releaseTimes}
              id={id}
              onRefurbish={function (): void { }}
              onSave={function (data: PriorityBo.ProveData): void {
                setProveState([...proves, data]);
              }}
            />

            <AddPriorityProve
              title="微博"
              icon={<IconWeibo width={18} height={18} />}
              illustrate={
                '在微博、微信公众号、抖音、今日头条单报道单平台转发量超1万、阅读量超5万得0.8分。'
              }
              channelId={'8117112414076995'}
              areaId={areaId}
              areaName={areaName}
              releaseTimes={releaseTimes}
              id={id}
              onRefurbish={function (): void { }}
              onSave={function (data: PriorityBo.ProveData): void {
                setProveState([...proves, data]);
              }}
            />
            <AddPriorityProve
              title="抖音"
              icon={<IconDouyin width={18} height={18} />}
              illustrate={
                '在微博、微信公众号、抖音、今日头条单报道单平台转发量超1万、阅读量超5万得0.8分。'
              }
              channelId={'8117112414994505'}
              areaId={areaId}
              areaName={areaName}
              releaseTimes={releaseTimes}
              id={id}
              onRefurbish={function (): void { }}
              onSave={function (data: PriorityBo.ProveData): void {
                setProveState([...proves, data]);
              }}
            />
            <AddPriorityProve
              title="今日头条"
              icon={<IconToutiao width={18} height={18} />}
              illustrate={
                '在微博、微信公众号、抖音、今日头条单报道单平台转发量超1万、阅读量超5万得0.8分。'
              }
              channelId={'8117112417026115'}
              areaId={areaId}
              areaName={areaName}
              releaseTimes={releaseTimes}
              id={id}
              onRefurbish={function (): void { }}
              onSave={function (data: PriorityBo.ProveData): void {
                setProveState([...proves, data]);
              }}
            />
          </Space>
        </div>
        {viewProveList(
          proves.filter(
            (item) =>
              item.title == '微信公众号' ||
              item.title == '微博' ||
              item.title == '抖音' ||
              item.title == '今日头条',
          ),
        )}
        <Divider orientation="left" plain>
          自有平台
        </Divider>
        <div style={{ display: 'flex', justifyContent: 'flex-end', textAlign: 'center', alignItems: 'center' }}>
          <Space align="start">
            <AddPriorityProve
              title="网站"
              icon={<LaptopOutlined />}
              trigger={
                <Button icon={<LaptopOutlined />}>
                  <span>网站</span>
                </Button>
              }
              channelId={'8117112410996805'}
              illustrate={'在自有平台转发量超1万、阅读量超5万得0.2分。'}
              areaId={areaId}
              areaName={areaName}
              releaseTimes={releaseTimes}
              id={id}
              onRefurbish={function (): void { }}
              onSave={function (data: PriorityBo.ProveData): void {
                setProveState([...proves, data]);
              }}
            />
            <AddPriorityProve
              title="客户端"
              icon={<ShakeOutlined />}
              trigger={
                <Button icon={<ShakeOutlined />}>
                  <span>客户端</span>
                </Button>
              }
              channelId={'8117112411979845'}
              illustrate={'在自有平台转发量超1万、阅读量超5万得0.2分。'}
              areaId={areaId}
              areaName={areaName}
              releaseTimes={releaseTimes}
              id={id}
              onRefurbish={function (): void { }}
              onSave={function (data: PriorityBo.ProveData): void {
                setProveState([...proves, data]);
              }}
            />
          </Space>
        </div>
        {viewProveList(proves.filter((item) => item.title == '网站' || item.title == '客户端'))}
      </Spin>
    </DrawerForm>
  );
};
export default AddPriority;
